import React, {Component} from 'react';
import {StyleSheet, View, Image, Text, TouchableOpacity} from 'react-native';
import Swiper from 'react-native-swiper';

export default class extends Component {
    //初始值
    state = {
        linkList: [
            '周小川执掌央行15年：改革之路维艰 每步都在向上',
            '特朗普团队新麻烦：被指曾窃取5000万“脸书”用户资料',
            '奔驰车主回应网友质疑毒驾：会尽快得到鉴定结果 还我清白',
            '美国官员勾结商界捏造谬论抹黑中国 事实真相被披露',
            '给力！小米新版米粉卡要来了：全国流量1元1GB/3元无限每天',
            '朴槿惠给自己留了条后路！因这招家人未受牵连',
            '霸占安兔兔性能排行榜 这几款手机凭啥？'
        ]
    };

    render() {
        const {linkList} = this.state;
        const noticeIcon = require('./img/notice.png');
        return (
            <View style={styles.container}>
                <Image source={noticeIcon} style={styles.icon}/>
                <View style={styles.listWrap}>
                    <Swiper
                        showsButtons={false}
                        autoplay={true}
                        horizontal={false}
                        showsPagination={false}>
                        {
                            linkList.map(item =>
                                <View
                                    style={styles.item}
                                    key={item}
                                >
                                    <View style={styles.flagWrap}>
                                        <Text style={styles.flagText}>推荐</Text>
                                    </View>
                                    <Text style={styles.link} numberOfLines={1}>{item}</Text>
                                </View>
                            )
                        }
                    </Swiper>
                </View>
                <View style={styles.button}>
                    <TouchableOpacity>
                        <Text style={styles.text}>更多</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        height: 32,
        padding: 6,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    icon: {
        justifyContent: 'center',
        alignItems: 'center',
        width: 88,
        height: 18
    },
    listWrap: {
        flex: 1,
    },
    item: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    flagWrap: {
        padding: 2,
        borderWidth: 1,
        borderColor: '#f66a99',
        borderRadius: 2,
        marginRight: 2
    },
    flagText: {
        fontSize: 12,
        color: '#f66a99'
    },
    link: {
        flex: 1,
        fontSize: 12,
        height: 18,
        lineHeight: 18,
        color: '#4c4c4c'
    },
    button: {
        borderLeftWidth: 1,
        borderColor: '#b7b7b7'
    },
    text: {
        height: 18,
        lineHeight: 18,
        fontSize: 12,
        color: '#4c4c4c',
        width: 36,
        textAlign: 'center'
    }
});
